import React, { Component } from "react";
import "./Classification.scss";
import { SideBar } from "antd-mobile";
import { category_list, category_subcate } from "../utils/api";
export default class Classification extends Component {
  constructor(props) {
    super(props);
    this.state = {
      oneCatearr: [],
      subCatearr: {}
    };
  }
  componentDidMount() {
    category_list().then((res) => {
      this.setState({
        oneCatearr: res.data.list,
      })
      // let id = res.data.list[0]
      // this.handChange(id,1)
    });
  }
  handChange = (key,index) => {
    category_subcate({ id: key }).then((res) => {
      this.setState({
        subCatearr: res.data.subcate,     
      })
    })
  }

  toAllgood(id){
    this.props.history.push({ pathname:'/index/Allgoods', state:{ id } })
}
  render() {
    return (
      <div className="classification">
        <div className="head">
          <div className="hdtop">分类</div>
          <div className="hdbtm">
            <span className="iconfont icon-sousuo"></span>
            <input type="text" placeholder="搜索店铺内商品" />
          </div>
        </div>
       
        <div className='main'>
          <SideBar onChange={this.handChange} className='left' >
            {
              this.state.oneCatearr.map(item1 => (
                <SideBar.Item key={item1.id} title={item1.name} />
              ))
            }
          </SideBar>
          <div className="subcate">
            {
              this.state.subCatearr.subcategory &&
              this.state.subCatearr.subcategory.map((item2, index) => {
                return (
                  <div className="cate2" key={index}>
                    <div className="name">{item2.name}</div>
                    <div className="list">
                      {
              
                        item2.subNavs.map((item3, index) => {
                          return (
                            <div onClick={() => { this.toAllgood(item3.id) }} className="cate3" key={index}>
                              <img src={item3.pic} alt="" />
                              <div className="text">{item3.name}</div>
                            </div>
                          )
                        })
                      }
                    </div>
                  </div>
                )
              })
            }
          </div>

        </div>

      </div>
    );
  }
}
